<template>
    <div class="example clearfix">
        <div class="example-demo">
            <div class="example-case">
                <slot name="case"></slot>
            </div>
            <div class="example-header">
                <span>{{edata.title}}
                  <!-- <a :href="'#'+name">#</a> -->
                </span>
            </div>
            <div class="example-desc" v-html="md">
            </div>
        </div>
        <div class="example-split"></div>
        <div class="example-code">
            <pre><code class="html">{{code}} </code></pre>
        </div>
    </div>
</template>
<script>
export default {
  name:'example',
  props: ['edata'],
  data() {
    return {
      code: ""
    };
  },
  computed: {
    md() {
      return marked(decodeURIComponent(this.edata.readme));
    }
  },
  created(){
    var vm=this;
    this.code = this.$slots.case["0"].componentOptions.Ctor.extendOptions.__resource.trim();
  },
  mounted(){
    var el=this.$el.getElementsByClassName('example-code')[0];
    // Prism.highlightElement(el)
    hljs.highlightBlock(el);
  }
};
</script>
<style lang="scss">
.example {
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 20px;
  position: relative;
  transition: all 0.2s ease-in-out;

  .example-demo,
  .example-code{
    width:50%;
    float: left;
  }
}
</style>
